<template>
  <div class="app-container">
    <el-dialog title="分配仓库权限" :visible.sync="detailvisible" width="1000px" append-to-body>
    <p style="text-align: center; margin: 0 0 20px">给用户 <strong><font size="5">{{userName}}</font></strong> 分配仓库</p>
      <div style="text-align: center;min-height: 600px;" >
        <el-transfer
          style="text-align: left; display: inline-block;"
          v-model="checkedValue"
          filterable
          :left-default-checked="[2, 3]"
          :right-default-checked="[1]"
          :render-content="renderFunc"
          :titles="['未分配', '已分配']"
          :button-texts="['到左边', '到右边']"
          :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
          }"
          @change="handleChange"
          :data="data">
<!--          <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
 -->          <el-button class="transfer-footer" slot="right-footer" size="small" @click="save">保存更新</el-button>
        </el-transfer>
      </div>
 </el-dialog>


  </div>
</template>

<script>
import { handleIsDefault,listDepot, getDepot, delDepot, addDepot, updateDepot } from "@/api/basicsystem/depot";
import { listAllDepot } from "@/api/basicsystem/depot";
import { saveUserBusiness,listValues } from "@/api/system/business";
export default {
  name: "AuthDepot",
  dicts: ['isDefault'],
  data() {
    return {
      userName:null,
      userId:null,
       detailvisible: false,
        data:[],
               checkedValue: [],
                renderFunc(h, option) {
                         return <span>{ option.label }</span>;
                       }

    };
  },
  created() {

  },
  methods: {
    listValues() {
      let queryParams={'userId':this.userId,'type':'1'}//1 代表仓库
      listValues(queryParams).then(response => {
        this.checkedValue = response.data;

      });
    },
    save(){
      console.log(this.checkedValue)
      let saveParm={'userId':this.userId,'type':'1','valueList':this.checkedValue}//1 代表仓库
      saveUserBusiness(saveParm).then(response => {
        this.$modal.msgSuccess("保存成功");
        this.detailvisible = false;
      });
    },
    show(userName,userId) {
      this.userName=userName;
 this.userId=userId;
      this.detailvisible = true;
        this.listAllDepot();
        this.listValues();
    }, /** 查询所产仓库 */
      listAllDepot() {//
      let that=this;
        this.loading = true;
        listAllDepot(this.queryParams).then(response => {
          console.log(response.list)
          let depotAll=response.list;
           console.log(depotAll.length)
       let data = [];
   depotAll.forEach(function(item, index) {
                  //item2 就是当日按循环到的对象
                  //index2是循环的索引，从0开始
                  let label=item.name;
                  let depetId=item.id;
    data.push({
      key: depetId,
      label:label
    });
       that.data=data;
        });
        });
      },
       handleChange(value, direction, movedKeys) {
              console.log(value, direction, movedKeys);
            }
  }
};
</script>
<style>
    .el-transfer-panel{
        height: 600px;
    }
    .el-transfer-panel__list.is-filterable{
        height: 500px;
    }
</style>
